<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <caption>书价</caption>
        <tr>
            <td>书名</td>
            <td>价格</td>
        </tr>
        <tr>
            <td>网页工程实训</td>
            <td>30</td>
        </tr>
        <tr>
            <td> C语言工程训练 </td>
            <td>32</td>
        </tr>
    </table>
    <button class="add">增加一行</button>
    <button class="delete">删除第二行</button>
    <button class="change">修改标题</button>
</body>
<script>
    var tableDom = document.querySelector("table");
    var titleDom = document.querySelector("caption");

    var buttomDomChange = document.querySelector(".change");
    var buttomDomAdd = document.querySelector(".and");
    var buttomDomDelete = document.querySelector(".delete");
    
    buttomDomChange.onclick=function(){
        titleDom.innerHTML="书的价格"；
    };

    buttomDomAdd.onclick= function(){
        var newRow = document.createElement("tr");
        newRow.innerHTML = "<td>新的一行</td><td>新的价格</td>";
        console.log(newRow);
        tableDom.appendChild(newRow);
    };

    buttomDomDelete.onclick=function(){
        var secondDom= document.querySelector("table tr:nth-child(2)");
        secondDom.style.display = "none";
        console.log(secondDom);
    };
</script>
</html>